<template>
	<view class="publish-activity">
		<navigator class="back-arrow" url="/pages/index/activityPublish/activityPublish">
			<view class="arrow"></view>
		</navigator>
		<text class="title">活动发布</text>
	</view>

	<view class="content">
		<!-- 标题 -->
		<view class="form-item">
			<text class="label">标题：</text>
			<input class="input-box" v-model="form.title" placeholder="请输入活动标题" />
		</view>

		<!-- 内容 -->
		<view class="form-item">
			<text class="label">内容：</text>
			<textarea class="textarea-box" v-model="form.content" placeholder="活动内容"></textarea>
		</view>

		<!-- 图片/视频上传 -->
		<!-- 图片/视频上传 -->
		<view class="form-item upload-section">
			<text class="label-image">图片/视频：</text>
			<view class="preview-list">
				<image v-for="(item, index) in form.media" :key="index" :src="item" class="preview-img" />
			</view>
			<view class="upload-box" @click="chooseMedia">
				<text class="upload-text">点击上传</text>
			</view>
		</view>



	</view>

	<!-- 发布 -->
	<view class="btn-section">
		<button form-type="submit" @click="publish">发布</button>
	</view>

</template>

<script setup>
	import {
		ref
	} from "vue";

	// 表单数据
	const form = ref({
		title: "",
		content: "",
		media: [] // 存储图片/视频路径
	});

	// 选择媒体
	const chooseMedia = () => {
		uni.chooseImage({
			count: 3, // 允许最多选择3张
			success: (res) => {
				form.value.media = res.tempFilePaths;
			}
		});
	};

	// 提交表单
	const publish = () => {
		if (!form.value.title || !form.value.content) {
			uni.showToast({
				title: "请填写完整信息",
				icon: "none"
			});
			return;
		}
		console.log("发布成功：", form.value);

		//跳转到活动发布
		uni.navigateTo({
			url: "/pages/index/activityPublish/activityPublish"
		})

	};
</script>

<style>
	.publish-activity {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 调整对齐方式，让内容靠近顶部 */
		height: 10vh;
		background-color: #F8F8F8;
		margin-bottom: 20rpx;
	}

	.back-arrow {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		/*  margin-right: 10px; */
		left: -250rpx;
	}

	.arrow {
		width: 10px;
		height: 10px;
		border-top: 2px solid black;
		border-right: 2px solid black;
		transform: rotate(-135deg);
		margin-top: 2vh;
	}

	.title {
		font-size: 20px;
		font-weight: normal;
		color: black;
		margin-top: 2vh;
		/* 向上移动标题，减少底部空间 */
	}


	/* 页面整体布局 */
	.content {
		padding: 16rpx 30rpx 16rpx 24rpx;
		background-color: #fff;
	}

	/* 调整表单项布局，使 label 与输入框顶部对齐 */
	.form-item {
		display: flex;
		align-items: flex-start;
		/* 让 label 与输入框顶部对齐 */
		margin-bottom: 30rpx;
		padding-left: 40rpx;
	}

	/* 标签 (左侧文字) */
	.label {
		width: 130rpx;
		font-size: 32rpx;
		color: black;
		line-height: 70rpx;
		/* 让 label 文字居中 */
	}

	/* 输入框 */
	.input-box {
		flex: 1;
		height: 70rpx;
		padding: 0rpx 20rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	/* 多行文本框 */
	.textarea-box {
		flex: 1;
		height: 140rpx;
		padding: 20rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		font-size: 30rpx;
	}

	/* 图片/视频上传部分 */
	.form-item.upload-section {
		flex-direction: column;
		/* 让上传框与预览图纵向排列 */
	}

	/* 上传框 */
	.upload-box {
		width: 170rpx;
		height: 170rpx;
		border: 2rpx dashed #bbb;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		cursor: pointer;
		margin-top: 20rpx;
		/* 让上传框靠下 */
		margin-left: 140rpx;
		background-color: lightgray;
	}

	/* 上传框文本 */
	.upload-text {
		color: #999;
		font-size: 28rpx;
	}

	/* 预览列表 */
	.preview-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	/* 预览图片 */
	.preview-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		object-fit: cover;
	}


	/* 发布活动按钮 */
	.btn-section {
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
	}

	/* 发布活动按钮 */
	.btn-section button {
		width: 510rpx;
		height: 72rpx;
		background-color: #1D6FFF;
		color: white;
		font-size: 14px;
		border-radius: 8rpx;
	}
</style>